<template>
  <div class="reservation-list-container">
    <el-card>
      <div slot="header" class="card-header">
        <span>我的预约</span>
        <el-radio-group v-model="activeTab" size="small" @change="handleTabChange">
          <el-radio-button label="exhibition">展览预约</el-radio-button>
          <el-radio-button label="guide">解说预约</el-radio-button>
        </el-radio-group>
      </div>
      
      <!-- 展览预约列表 -->
      <div v-if="activeTab === 'exhibition'" v-loading="loading">
        <el-table :data="exhibitionReservations" style="width: 100%" border>
          <el-table-column prop="exhibitionName" label="展览名称" min-width="120"></el-table-column>
          <el-table-column prop="reservationDate" label="预约日期" width="120"></el-table-column>
          <el-table-column prop="timeSlot" label="时间段" width="120"></el-table-column>
          <el-table-column prop="visitorCount" label="预约人数" width="100" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button 
                type="danger" 
                size="mini" 
                @click="cancelReservation(scope.row, 'exhibition')" 
                :disabled="!canCancel(scope.row.status)"
              >取消预约</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 空数据提示 -->
        <el-empty v-if="exhibitionReservations.length === 0 && !loading" description="暂无展览预约记录"></el-empty>
      </div>
      
      <!-- 解说预约列表 -->
      <div v-if="activeTab === 'guide'" v-loading="loading">
        <el-table :data="guideReservations" style="width: 100%" border>
          <el-table-column prop="guideName" label="解说员" min-width="100"></el-table-column>
          <el-table-column prop="exhibitionName" label="展览名称" min-width="120"></el-table-column>
          <el-table-column prop="reservationDate" label="预约日期" width="120"></el-table-column>
          <el-table-column prop="timeSlot" label="时间段" width="120"></el-table-column>
          <el-table-column prop="visitorCount" label="预约人数" width="100" align="center"></el-table-column>
          <el-table-column prop="status" label="状态" width="100" align="center">
            <template slot-scope="scope">
              <el-tag :type="getStatusType(scope.row.status)">{{ getStatusText(scope.row.status) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
          <el-table-column label="操作" width="120" align="center">
            <template slot-scope="scope">
              <el-button 
                type="danger" 
                size="mini" 
                @click="cancelReservation(scope.row, 'guide')" 
                :disabled="!canCancel(scope.row.status)"
              >取消预约</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 空数据提示 -->
        <el-empty v-if="guideReservations.length === 0 && !loading" description="暂无解说预约记录"></el-empty>
      </div>
      
      <!-- 分页 -->
      <el-pagination
        v-if="total > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        class="pagination"
      >
      </el-pagination>
    </el-card>
    
    <!-- 取消预约确认对话框 -->
    <el-dialog
      title="取消预约"
      :visible.sync="cancelDialogVisible"
      width="400px"
    >
      <div class="cancel-dialog-content">
        <p>确定要取消该预约吗？取消后将无法恢复。</p>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDialogVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmCancel" :loading="cancelLoading">确定取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'ReservationList',
  data() {
    return {
      // 当前激活的标签页
      activeTab: 'exhibition',
      // 展览预约列表
      exhibitionReservations: [],
      // 解说预约列表
      guideReservations: [],
      // 加载状态
      loading: false,
      // 分页参数
      currentPage: 1,
      pageSize: 10,
      total: 0,
      // 取消预约对话框
      cancelDialogVisible: false,
      // 当前选中的预约
      currentReservation: null,
      // 取消预约加载状态
      cancelLoading: false
    }
  },
  created() {
    // 获取预约列表
    this.getReservationList()
  },
  methods: {
    // 获取预约列表
    async getReservationList() {
      this.loading = true
      try {
        if (this.activeTab === 'guide') {
          const { data: res } = await this.$http.get(`/guide-reservation/user/${this.$store.state.userInfo.id}`, {
          params: {
            page: this.currentPage,
            size: this.pageSize,
          }})
          if(res.code === 200) {
            this.guideReservations = res.data.records || []
            this.total = res.data.total || 0
          } else {
          this.$message.error(res.message || '获取预约列表失败')
        }
        } else{
          const { data: res } = await this.$http.get(`/exhibition-reservation/user/${this.$store.state.userInfo.id}`, {
          params: {
            page: this.currentPage,
            size: this.pageSize,
          }})
          if(res.code === 200) {
            this.exhibitionReservations = res.data.records || []
            this.total = res.data.total || 0
          } else {
          this.$message.error(res.message || '获取预约列表失败')
        }
        }
      } catch (error) {
        console.error('获取预约列表失败', error)
        this.$message.error('获取预约列表失败，请稍后重试')
        // 使用模拟数据
        this.loadMockData()
      } finally {
        this.loading = false
      }
    },
    // 加载模拟数据
    loadMockData() {
      if (this.activeTab === 'exhibition') {
        this.exhibitionReservations = [
          {
            id: '1',
            exhibitionName: '古代陶瓷艺术展',
            reservationDate: '2023-07-15',
            timeSlot: '09:00-11:00',
            visitorCount: 2,
            status: 'PENDING',
            createTime: '2023-07-10 14:30:00'
          },
          {
            id: '2',
            exhibitionName: '近代绘画作品展',
            reservationDate: '2023-07-20',
            timeSlot: '13:00-15:00',
            visitorCount: 3,
            status: 'APPROVED',
            createTime: '2023-07-12 10:15:00'
          },
          {
            id: '3',
            exhibitionName: '民间工艺品展览',
            reservationDate: '2023-07-05',
            timeSlot: '15:00-17:00',
            visitorCount: 1,
            status: 'CANCELED',
            createTime: '2023-07-01 16:45:00'
          }
        ]
      } else {
        this.guideReservations = [
          {
            id: '4',
            guideName: '张明',
            exhibitionName: '古代陶瓷艺术展',
            reservationDate: '2023-07-16',
            timeSlot: '09:00-11:00',
            visitorCount: 2,
            status: 'PENDING',
            createTime: '2023-07-11 09:30:00'
          },
          {
            id: '5',
            guideName: '李华',
            exhibitionName: '近代绘画作品展',
            reservationDate: '2023-07-22',
            timeSlot: '13:00-15:00',
            visitorCount: 4,
            status: 'APPROVED',
            createTime: '2023-07-13 11:20:00'
          }
        ]
      }
      this.total = this.activeTab === 'exhibition' ? this.exhibitionReservations.length : this.guideReservations.length
    },
    // 处理标签页切换
    handleTabChange() {
      this.currentPage = 1
      this.getReservationList()
    },
    // 处理页码变化
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.getReservationList()
    },
    // 处理每页条数变化
    handleSizeChange(newSize) {
      this.pageSize = newSize
      this.currentPage = 1
      this.getReservationList()
    },
    // 获取预约状态文本
    getStatusText(status) {
      const statusMap = {
        'PENDING': '待审核',
        'APPROVED': '已通过',
        'REJECTED': '已拒绝',
        'CANCELED': '已取消'
      }
      return statusMap[status] || '未知'
    },
    // 获取预约状态类型
    getStatusType(status) {
      const typeMap = {
        'PENDING': 'warning',
        'APPROVED': 'success',
        'REJECTED': 'danger',
        'CANCELED': 'info'
      }
      return typeMap[status] || ''
    },
    // 判断是否可以取消预约
    canCancel(status) {
      // 只有待审核和已通过的预约可以取消
      return status === 'PENDING' || status === 'APPROVED'
    },
    // 取消预约
    cancelReservation(reservation, type) {
      this.currentReservation = {...reservation, currentType: type}
      this.cancelDialogVisible = true;
      if (type == 'exhibition') {
        this.handleExhibitionCancel();
        return;
      }
      this.handleGuideCancel();
    },

    async handleExhibitionCancel() {
    },

    async handleGuideCancel() {},


    // 确认取消预约
    async confirmCancel() {
      if (!this.currentReservation) return
      this.cancelLoading = true
      try {
        this.cancelLoading = true;
        const { data: res } = await this.$http.put(`/reservation/${this.currentReservation.id}/${this.currentReservation.currentType == 'exhibition' ? 'cancel' : 'guideCancel'}`);
        this.cancelLoading = false
        if (res.code === 200) {
          this.$message.success('预约取消成功')
          this.cancelDialogVisible = false
          this.getReservationList()
          return;
        } 
        this.$message.error(res.message || '取消预约失败')
      } catch (error) {
        this.cancelLoading = false;
        this.$message.error('取消预约失败')
      }
    },
    // 格式化日期
    formatDate(dateStr) {
      return moment(dateStr).format('YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>
.reservation-list-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}

.cancel-dialog-content {
  text-align: center;
  padding: 20px 0;
}
</style>